<template>
	<view class="history-page">
		<view class="history-header">
			<text class="header-title">我的足迹</text>
			<text class="manage-btn" @click="toggleManageMode">{{ isManageMode ? '完成' : '管理' }}</text>
		</view>
		<template v-for="(group, date) in groupedHistory" :key="date">
			<view class="history-date">{{ date }}</view>
			<view class="history-grid">
				<view v-for="item in group" :key="item.id" class="history-grid-item">
					<checkbox v-if="isManageMode" class="item-checkbox" :value="item.id"
						:checked="selectedItems.includes(item.id)" @click="toggleSelect(item.id)" />
					<product-card :imageUrl="item.image" :title="item.title" :price="item.price"
						:originalPrice="item.price" @click="handleItemClick(item)" />
					<text class="history-time">{{ item.time }}</text>
				</view>
			</view>
		</template>
		<uni-load-more :status="loadMoreStatus" />

		<!-- 管理模式底部操作栏 -->
		<view v-if="isManageMode" class="manage-footer">
			<view>
			</view>
			<view>
				<button class="delete-btn" @click="handleDelete" :disabled="!selectedItems.length">删除</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import ProductCard from '@/components/product-card/product-card.vue'

	// 管理模式相关状态
	const isManageMode = ref(false)
	const selectedItems = ref([])
	const isAllSelected = computed(() => {
		return historyList.value.length > 0 && historyList.value.every(item => selectedItems.value.includes(item
			.id))
	})

	// 浏览历史数据
	const historyList = ref([{
			id: 1,
			title: '商品名称示例1',
			price: '299.00',
			image: 'https://via.placeholder.com/200x200',
			time: '2024-01-10 15:30',
			date: '2024-01-10'
		},
		{
			id: 2,
			title: '商品名称示例2',
			price: '199.00',
			image: 'https://via.placeholder.com/200x200',
			time: '2024-01-10 14:20',
			date: '2024-01-10'
		},
		{
			id: 3,
			title: '商品名称示例3',
			price: '399.00',
			image: 'https://via.placeholder.com/200x200',
			time: '2024-01-09 16:45',
			date: '2024-01-09'
		}
	])

	// 按日期分组
	const groupedHistory = computed(() => {
		const groups = {}
		historyList.value.forEach(item => {
			if (!groups[item.date]) {
				groups[item.date] = []
			}
			groups[item.date].push(item)
		})
		return groups
	})

	// 加载更多状态
	const loadMoreStatus = ref('more')
	const page = ref(1)
	const pageSize = 10

	// 下拉刷新
	const onPullDownRefresh = async () => {
		try {
			page.value = 1
			// TODO: 调用接口刷新数据
			uni.stopPullDownRefresh()
		} catch (error) {
			console.error('刷新数据失败:', error)
			uni.stopPullDownRefresh()
		}
	}

	// 上拉加载更多
	const onReachBottom = async () => {
		if (loadMoreStatus.value === 'noMore') return

		loadMoreStatus.value = 'loading'
		try {
			// TODO: 调用接口加载更多数据
			page.value++
			// 模拟没有更多数据
			if (page.value > 3) {
				loadMoreStatus.value = 'noMore'
			} else {
				loadMoreStatus.value = 'more'
			}
		} catch (error) {
			console.error('加载更多数据失败:', error)
			loadMoreStatus.value = 'more'
		}
	}

	// 点击历史记录项
	const handleItemClick = (item) => {
		if (isManageMode.value) return
		uni.navigateTo({
			url: `/pages/product/product?id=${item.id}`
		})
	}

	// 切换管理模式
	const toggleManageMode = () => {
		isManageMode.value = !isManageMode.value
		if (!isManageMode.value) {
			selectedItems.value = []
		}
	}

	// 选择/取消选择单个商品
	const toggleSelect = (id) => {
		const index = selectedItems.value.indexOf(id)
		if (index === -1) {
			selectedItems.value.push(id)
		} else {
			selectedItems.value.splice(index, 1)
		}
	}

	// 删除选中的历史记录
	const handleDelete = () => {
		uni.showModal({
			title: '确认删除',
			content: '是否删除选中的浏览记录？',
			success: (res) => {
				if (res.confirm) {
					// TODO: 调用接口删除选中的记录
					historyList.value = historyList.value.filter(item => !selectedItems.value.includes(item
						.id))
					selectedItems.value = []
					if (historyList.value.length === 0) {
						isManageMode.value = false
					}
				}
			}
		})
	}

	// 页面生命周期
	onMounted(() => {
		// TODO: 初始化数据
	})

	// 导出页面事件处理函数
	defineExpose({
		onPullDownRefresh,
		onReachBottom
	})
</script>

<style lang="scss" scoped>
	.history-page {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding-bottom: 100px;
	}

	.history-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 15px;
		background-color: #fff;
		border-bottom: 1px solid #eee;

		.header-title {
			font-size: 16px;
			font-weight: bold;
			color: #333;
		}

		.manage-btn {
			font-size: 14px;
			color: #666;
		}
	}

	.history-date {
		padding: 10px 15px;
		font-size: 14px;
		color: #666;
		background-color: #f8f8f8;
	}

	.history-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		padding: 10px;
	}

	.history-grid-item {
		position: relative;

		.item-checkbox {
			position: absolute;
			top: 10px;
			right: 10px;
			z-index: 10;
			transform: scale(1.2);

			::v-deep .uni-checkbox-input {
				border-radius: 50%;
				width: 18px;
				height: 18px;
				border: 1px solid #ddd;
				background-color: #fff;
				transition: all 0.3s;
			}

			::v-deep .uni-checkbox-input.uni-checkbox-input-checked {
				background-color: #ff6a6a;
				border-color: #ff6a6a;
			}
		}

		.history-time {
			display: block;
			font-size: 12px;
			color: #999;
			text-align: center;
			margin-top: 5px;
		}
	}

	.manage-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 10px 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #eee;

		.delete-btn {
			background-color: #ff6a6a;
			color: #fff;
			font-size: 14px;
			padding: 6px 20px;
			border-radius: 20px;
			margin-left: auto;

			&:disabled {
				background-color: #ccc;
			}
		}
	}
</style>